<template>
  <div class="app-container detail">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="担保人基本信息" name="1"> <BasicInfo :dataFrom="loanInfo"></BasicInfo> </el-tab-pane>
      <el-tab-pane label="经营实体信息" name="6"> <Entity :dataFrom="loanInfo"></Entity> </el-tab-pane>
      <el-tab-pane label="担保主体信息" name="2"> <Subject :dataFrom="loanInfo"></Subject> </el-tab-pane>
      <el-tab-pane label="押品信息" name="3"> <Collateral :dataFrom="loanInfo"></Collateral> </el-tab-pane>
      <el-tab-pane label="调查说明" name="4">
        <div><el-input v-model="descript" type="textarea" /></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import BasicInfo from "./basicInfo.vue";
import Collateral from "./collateral.vue";
import Entity from "./entity.vue";
import Subject from "./subject.vue";
import { getDueDetail } from "@/api/guarantee";
const router = useRouter();
const route = useRoute();
const state = reactive({
  loanInfo: {}, //担保人基本信息
});
const descript = ref("");
const { loanInfo } = toRefs(state);
const activeName = ref("1");
onMounted(() => {});

async function getDetail() {
  const data = await getDueDetail(route.query.id);
  if (data.code == "200") {
    loanInfo.value = data.data;
    descript.value = loanInfo.value.customInfo.description;
  }
  console.log(loanInfo.value, "loanInfo.value");
}
getDetail();
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
</style>
